<template>
  <div class="coupons">
    <div class="coupon" v-for="coupon in coupons" :key="coupon.id">
      <div class="top">
        <div class="left">
          <span><span>￥</span>{{ coupon.value }}</span>
          <span>￥{{ coupon.condition }}</span>
        </div>
        <div class="right">
          <div class="le">
            <h3>{{ coupon.name }}</h3>
            有效期至{{ coupon.endAts }}
          </div>
          <span>去使用</span>
        </div>
      </div>
      <div class="bottom">
        {{ coupon.reason }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "coupons",
  props:["urls"],
  data() {
    return {
      coupons: [],
    };
  },
  created() {
    axios({
      method: "get",
      url: this.urls,
    }).then((res) => {
        // console.log(this);
      this.coupons = res.data;
    });
  },
};
</script>
<style  scoped>
.coupon {
  height: 1.45rem;
  margin-bottom: 0.1rem;
  background-color: rgb(254, 251, 254);
  padding: 0.14rem;
  box-sizing: border-box;
  border-radius: 0.08rem;
}
.coupon .top {
  height: 0.97rem;
  display: flex;
}
.coupon .left {
  border-radius: 0.08rem;
  width: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 239, 217);
  color: rgb(134, 82, 0);
}
.coupon .left span:first-child span {
  font-size: 0.16rem;
  font-weight: 500;
}
.coupon .left span:first-child {
  font-size: 0.36rem;
  font-weight: 500;
}
.coupon .right {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: rgb(180, 115, 31);
  flex: 1;
  background-image: url(https://m.xiaomiyoupin.com/youpin/static/m/res/images/coupon/couponv2_valid_zhijian_right.png);
  background-size: 100%;
}
.coupon .right h3 {
  font-size: 0.16rem;
}
.coupon .right span {
  padding: 0.03rem 0.15rem;
  color: #fff;
  border-radius: 0.15rem;
  background-color: rgb(180, 115, 31);
}
.coupon .bottom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.14rem;
  /* display: flex; */
  /* align-items: center; */
}
</style>

